<template>
	<div class="addr">
		<div class="bg" :style="{backgroundImage:`url(${addressHeadImg})`}"></div>
		<div class="content">
			<div class="item">
				<div class="title">收货人</div>
				<input placeholder="请输入收货人姓名" v-model="name" />
			</div>
			<div class="item">
				<div class="title">手机号</div>
				<input placeholder="请输入手机号码" v-model="mobile" type="number"/>
			</div>
			<div class="item">
				<div class="title">所在城市</div>
				<div class="address" @click="chooseArea">
					<span>{{this.areaData}}</span>
					<u-picker mode="region" v-model="show" @confirm="areaConfirm" :params="params"></u-picker>
				</div>
			</div>
			<div class="detail-addr">
				<textarea rows="8" cols="10" v-model="detailAddr" placeholder="请输入详细的地址"></textarea>
			</div>
		</div>
		<div class="btn">
			<div class="cancel" @click="cancel()">取消</div>
			<div class="confirm" @tap="updateUserInfo()">提交</div>
		</div>
		<u-modal @confirm="goToMyPrize" :show-title="false" v-model="showModal" :content="content" :show-confirm-button="true" :show-cancel-button="false" confirm-text="好的">
			
		</u-modal>
	</div>
</template>
<script>
	import Vue from 'vue';
	import areas from '../../common/areaList.js';
	import {
		uploadPageInfo,
	} from '@/util/collection.js';
	export default {
		name: "addr",
		components: {

		},
		data() {
			return {
				showModal: false,
				content: '',
				activityId: 0,
				addressHeadImg: '',
				logid: 0,
				name: '',
				mobile: '',
				show: false,
				detailAddr:'',
				areaList: {},
				areaData: '请选择收货地址',
				params : {
					province: true,
					city: true,
					area: true
				}
			};
		},
		created() {
			
		},
		mounted() {
			this.areaList = areas;
			var that = this;
		},
		onLoad: function(options){
			console.log(options);
			this.logid = options.logid;
			this.activityId = options.activityId;

			var that = this;
			//获取之前保存的游戏ID
			uni.getStorage({
			    key: 'taibao_luckyDraw_data'+that.activityId,
			    success: function (res) {
					console.log(res);
					that.activityId = res.data.activityId;
					that.addressHeadImg = res.data.addressHeadImg;
			    }
			});
		},
		onShow(){
			uploadPageInfo(this.activityId,this.$api.collection.saveAddonsInfo,'pages/address/address');
		},
		methods: {
			goToMyPrize(){
				var that = this;
				uni.navigateTo({
					url: '/pages/myPrize/myPrize?activityId='+that.activityId
				});
			},
			cancel(){
				var that = this;
				uni.navigateTo({
					url: '/pages/myPrize/myPrize?activityId='+that.activityId
				});
			},
			updateUserInfo(){
				let name = this.name;
				let mobile = this.mobile;
				let areaData = this.areaData;
				let detailAddr = this.detailAddr;
				
				if(!name){
					uni.showToast({
						title: '收货人不能为空',
						icon: 'none'
					});
					return false;
				}
				if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(mobile))){
					uni.showToast({
						title: '请输入正确手机号码',
						icon: 'none'
					});
					return false;
				}
				if(areaData == "请选择收货地址"){
					uni.showToast({
						title: '请选择所在城市',
						icon: 'none'
					});
					return false;
				}
				if(!detailAddr){
					uni.showToast({
						title: '详细地址不能为空',
						icon: 'none'
					});
					return false;
				}
				
				var that = this;
				this.$request({
					url: that.$api.address.saveUserInfo,
					method: 'post',
					data: {
						activityid: that.activityId,
						pondLogsid: that.logid,
						name: that.name,
						mobile: that.mobile,
						city: that.areaData,
						address: that.detailAddr
					},
					header: {
					        'content-type': 'application/json' //自定义请求头信息
					    },
				}).then(info => {
					if(info.code == 203){
						uni.showToast({
							title: info.msg,
							icon: 'none'
						})
						return false;
					}else if(info.code == 200){
						that.showModal = true;
						that.content = info.msg;
						
						
						
					}
				}).catch(error => {
					console.log(error)
				})
			},
			areaConfirm(data) {
				this.show = false;
				let area = data.area.label;
				let city = data.city.label;
				let province = data.province.label;
				this.areaData = province+city+area;
			},
			areaConfirmcancel() {
				this.show = false;
			},
			chooseArea(){
				this.show = true;
			}
		}
	};
</script>
<style scoped>
	.addr {
		background-color: #ffd7b4;
		/* padding-bottom: 2rpx; */
		width: 100%;
	}

	.bg {
		background:  top center no-repeat;
		background-size: 750rpx 230rpx;
		width: 750rpx;
		height: 240rpx;
	}

	.content {
		width: 90%;
		height: 900rpx;
		background-color: #ffffff;
		margin: auto;
		margin-top: -40rpx;
		padding: 40rpx 40rpx 0 40rpx;
		;
		border-radius: 10rpx;
	}

	.item {
		margin-bottom: 50rpx;
	}

	.title {
		font-size: 30rpx;
		font-weight: 800;
		padding-left: 10rpx;
		padding-bottom: 10px;
	}

	input {
		height: 70rpx;
		width: 100%;
		background-color: #f7f7f7;
		font-size: 26rpx;
		border: 0;
		padding-left: 20rpx;
	}

	.address {
		height: 70rpx;
		line-height: 70rpx;
		width: 100%;
		border: 1px solid #fa9b19;
		color: #fa9b19;
		padding: 0 20rpx;
		border-radius: 20rpx;
		font-size: 26rpx;
		display: flex;
		justify-content: space-between;
	}

	.detail-addr {}

	.detail-addr textarea {
		width: 100%;
		font-size: 28rpx;
		background-color: #f7f7f7;
		border: 1px solid #f7f7f7;
		border-radius: 10rpx;
		padding: 20rpx;
	}

	.btn {
		width: 100%;
		height: 260rpx;
		padding: 50rpx;
		font-size: 32rpx;
		display: flex;
		justify-content: space-between;
		text-align: center;
		color: #FFFFFF;
	}

	.btn div {
		width: 240rpx;
		border-radius: 20rpx;
		height: 60rpx;
		line-height: 60rpx;
		background-color: #ff7425;
	}
</style>
